<template>
  <div>
    <span :class="hasFinish ? 'success':'danger'">{{ title }}</span>
    <button @click="toggleFinish">切换</button>
    <button @click="deleteTodo">x</button>
  </div>
</template>

<script>
export default {
  props: ['id', 'title', 'hasFinish'],
  methods: {
    toggleFinish () {
      this.$emit('toggle-finish', { id: this.id })
    },
    deleteTodo () {
      this.$emit('delete-todo', { id: this.id })
    }
  }
}
</script>

<style>
.success {
  color:aqua;
}
.danger {
  color: palevioletred;
}
</style>
